<template>
	<view class="careing">


		<view class="main w_90 bg_color_f">
			<view class="inner">
				<view class="title font_size_32 color_3 text_center">{{getSelect(deviceinfo.workModeName)}}</view>
				<view class="time text_center" v-if="deviceinfo.workMode==14">{{$t('dryingStopsImmediately')}}</view>
				<view v-else>
					<view class="time text_center">{{ workTimeFormatted }}</view>
					<view class="time2 text_center font_size_32">{{$t('remaining.time')}}</view>
				</view>
				<view class="flex_2 text_center process-box">
					<!-- <view>{{$t('Steam.preparation')}}</view> -->
					<view>{{list[0].title}}</view>
					<view v-if="list.length > 0">
						<uni-steps :options="list" active-color="#AF9453" :active="active" direction="column" />
					</view>
				</view>
				<view class="btn-border flex_1">
					<view class="btn-circular flex_1 font_size_32" @click="togglePause">
						{{isPaused?$t('pause'):$t('continue')}}
					</view>
				</view>
				<view class="btn-end text_center" @click="openTipsPopup">{{$t('home.btn-end')}}</view>
				<view class="tips">{{$t('switch.devices')}}</view>
			</view>
		</view>
		<!-- <view @click="getjj">1111</view> -->
		<!-- 用户点击暂停弹窗	 -->
		<popup-tips ref="popupTips" @confirm="handleTipsConfirm"></popup-tips>

		<!-- 护理完成弹窗 -->
		<popup-success ref="popupSuccess" :url="url" :title="title" @confirm="handleSuccessConfirm"></popup-success>

	</view>
</template>

<script>
	import PopupTips from '@/componets/PopupTips.vue';
	import PopupSuccess from '@/componets/PopupSuccess.vue';
	import {
		setDeviceWorkStatus,
		updateIsFinish
	} from '@/api/home.js'
	import {
		deviceInfo,
		deviceList
	} from '@/api/device.js'

	export default {
		name: 'CareingComp',
		components: {
			PopupTips,
			PopupSuccess
		},
		props: {
			deviceSn: {
				type: String,
				default: null,
			},
			deviceWorkStatus: {
				type: Number,
				default: null,
			}
		},
		data() {
			return {
				sn: '', //设备sn		
				active: 0, //当前蒸汽准备状态
				list: [], // 时间线显示数据
				list2: [{
					title: this.$t('home.Steam-preparation'),
					desc: '2018-11-11'
				}, {
					title: this.$t('home.Steam-molding'),
					desc: '2018-11-12'
				}, {
					title: this.$t('home.Gently-dry'),
					desc: '2018-11-13'
				}, {
					title: this.$t('home.Sterilization'),
					desc: '2018-11-14'
				}],
				deviceinfo: {}, //设备信息				
				isPaused: true, // 初始状态为暂停
				// workTime: 100, // 倒计时初始值（秒）
				deviceListArr: [], //设备列表
				// workStatus: 0, //3是暂停 停止倒计时
				workTimeFormatted: null, //倒计时-时间显示
				timerWork: null,
				workMode: 15, // workMode>=15 去味 7-14：烘干
				title: this.$t('nursing.completed'), //消息提示
				url: '/static/image/icon-success.png'
			}
		},
		mounted() {
			if (this.deviceWorkStatus != 0 && this.deviceSn) {
				this.sn = this.deviceSn;
				this.deviceInfo(this.deviceSn); //获取设备信息
				this.getwork();
			} else {
				clearInterval(this.timerWork);
				this.timerWork = null;
			}
		},
		destroyed() {
			clearInterval(this.timerWork);
			this.timerWork = null;
		},
		methods: {
			getjj() {
				this.$refs.popupSuccess.open();
			},
			getSelect(lei) {
				switch (lei) {
					case '快速护理':
						return this.$t('home.Quick-care')
						break
					case '精细护理-羊毛':
						return this.$t('wool')
						break
					case '精细护理-棉麻':
						return this.$t('cotton.and.linen')
						break
					case '精细护理-羽绒':
						return this.$t('down')
						break
					case '娇奢护理':
						return this.$t('home.Luxury-care')
						break
					case '精细护理-化纤':
						return this.$t('chemical.fiber')
						break
					case '精细护理-皮草':
						return this.$t('fur')
						break
					case '轻柔烘干':
						return this.$t('home.Gently-dry')
						break
					case '烘干15分钟':
						return this.$t('dry.minutes')
						break
					case '烘干30分钟':
						return this.$t('dry.minutes.one')
						break
					case '烘干60分钟':
						return this.$t('dry.minutes.to')
						break
					case '烘干90分钟':
						return this.$t('dry.minutes.three')
						break
					case '烘干120分钟':
						return this.$t('dry.minutes.four')
						break
					case '烘干180分钟':
						return this.$t('dry.minutes.five')
						break
					case '自动烘干':
						return this.$t('automatic.drying')
						break
					case '去味除菌45分钟':
						return this.$t('sterilization')
						break
					case '去味除菌90分钟':
						return this.$t('sterilization.one')
						break
					default:
						return this.$t('unknown')
				}
			},
			// 定时查询工作状态
			getwork() {
				clearInterval(this.timerWork)
				this.timerWork = setInterval(() => {
					this.deviceInfo(this.sn)
				}, 10000); // 每10秒更新一次
			},
			// 格式化倒计时时间，转换为分钟和秒
			workTimeFormattedata() {
				const hours = Math.floor(this.deviceinfo.workTime / 3600);
				const minutes = Math.floor((this.deviceinfo.workTime % 3600) / 60);
				const seconds = this.deviceinfo.workTime % 60;
				this.workTimeFormatted =
					`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
				console.log(this.workTimeFormatted);
			},
			// 切换工作状态
			togglePause() {
				// 2:工作中  3:暂停  4:工作完成
				if (this.isPaused) {
					// 如果当前是暂停状态，点击后发送2，并改变状态
					this.setDevicStatus(3);
				} else {
					// 如果当前是继续状态，点击后发送3，并改变状态
					this.setDevicStatus(2);
				}
				// 切换isPaused状态
				this.isPaused = !this.isPaused;
			},
			async setDevicStatus(status) {
				if (status === 0) {
					// clearInterval(this.timerWork);
					// this.timerWork = null;

				}
				await setDeviceWorkStatus({
					sn: this.sn,
					status: status
				}).then((r) => {
					console.log(r, '会不会')

					if (r.code == 0) {
						setTimeout(() => {

							// uni.showLoading({
							// 	title: this.$t('loading')
							// });
							this.handleSuccessConfirm();

						}, 5000)
						// this.config.Toast('修改成功');
						if (status == 0) {
							this.$emit('stopCare');
						}
					} else {
						clearInterval(this.timerWork);
						this.timerWork = null;
						this.config.Toast(r.message)
						uni.hideLoading() //清空终止加载
					}
				}).catch(err => {

					console.log('err==重开定时器', err)
				})
			},
			// 搜索设备是否存在
			deviceInfo(sn) {
				let that = this;
				deviceInfo({
					sn: sn
				}).then((r) => {
					that.deviceinfo = r.data;
					console.log(that.deviceinfo, 'kkkkkkkk')
					that.active = that.deviceinfo.workPhase;
					// that.workTime = that.deviceinfo.workTime;
					// that.workStatus = that.deviceinfo.workStatus;
					that.workMode = that.deviceinfo.workMode;
					that.workTimeFormattedata();
					that.handleSetTimeList();

					if (that.deviceinfo.workStatus == 3) {
						that.isPaused = false;
					} else {
						that.isPaused = true;
					}
					if (that.deviceinfo.isFinish == 1) {
						// that.$refs.popupSuccess.open();
						clearInterval(that.timerWork);
						that.timerWork = null;
					}
					// if (that.deviceinfo.isFinish == 2) {
					// 	that.title = that.$t('termination')
					// 	that.url = '/static/image/icon-error.png'
					// 	that.$refs.popupSuccess.open();
					// 	clearInterval(that.timerWork);
					// 	that.timerWork = null;
					// }
					if (that.deviceinfo.isFinish == 2) {
						that.$emit('change')
					}
					if (that.deviceinfo.workStatus == 5) {
						uni.hideLoading() //清空终止加载
					}


					// if (that.deviceinfo.workStatus == 0) {
					// 	this.$emit('stopCare');
					// 	return;
					// }
					console.log(that.deviceinfo.isFinish, '11111111')
					// isFinish==1 代表工作已完成

				}).catch((err) => {
					console.log('err==', err)
					// this.$refs.PopupError.open();
				})
			},
			// 处理显示时间线模式
			handleSetTimeList() {
				if (this.workMode >= 7 && this.workMode < 15) {
					this.list = [
						this.list2[2],
						this.list2[3]
					];
					this.active = this.active - 2;
				} else if (this.workMode >= 15) {
					this.list = [
						this.list2[3]
					];
					this.active = this.active - 3;
				} else {
					this.list = JSON.parse(JSON.stringify(this.list2));
				}

				// console.log(this.list);
				// console.log(this.active);
			},
			// 用户点击终止
			openTipsPopup() {
				this.$refs.popupTips.open();
			},
			// 用户确认终止
			async handleTipsConfirm() {
				// this.isPaused = false;
				uni.showLoading({
					title: this.$t('loading'),
					mask: true
				});
				await this.setDevicStatus(0); //状态0终止	
			},
			// 护理完成知道了
			handleSuccessConfirm() {
				updateIsFinish({
					sn: this.sn
				}).then((r) => {
					if (r.code == 0) {
						if (this.deviceinfo.workStatus == 0) {
							this.$emit('stopCare');
							return;
						}
						this.$emit('stopCare');
					}
				})
			},
		},

	}
</script>

<style>
	.uni-select {
		border: none !important;
		height: 78rpx !important;
	}

	.uni-steps__column-circle {
		width: 20rpx !important;
		height: 20rpx !important;
	}

	.uniui-checkbox-filled:before {
		content: "\e665" !important;
		color: #AF9453;
		border: 1px solid #AF9453;
		border-radius: 50%;
		margin-left: 1px;
	}

	.uni-steps__column-desc {
		opacity: 0;
	}

	.uni-steps__column-text {
		border: none !important;
	}
</style>

<style lang="scss" scoped>
	.careing {
		padding-bottom: 20rpx;

		.main {
			border-radius: 20rpx;
			margin-top: 22rpx;
			padding-bottom: 40rpx;

			.inner {
				.process-box {
					height: 370rpx;
					margin-bottom: 5rpx;
				}

				.title {
					box-sizing: border-box;
					padding-top: 60rpx;
					margin-bottom: 50rpx;
					font-weight: 500;
				}

				.time {
					color: $uni-theme-color;
					font-size: 90rpx;
				}

				.time2 {
					color: #c2c2c2;
					margin-bottom: 60rpx;
					margin-top: 10rpx;
				}
			}

			.btn-border {
				width: 172rpx;
				height: 172rpx;
				border-radius: 50%;
				border: 3rpx solid #AF9453;
				margin: auto;

				.btn-circular {
					width: 158rpx;
					height: 158rpx;
					background: #AF9453;
					border-radius: 50%;
					color: #FFFFFF;
				}
			}

			.btn-end {
				font-weight: 500;
				font-size: 32rpx;
				color: #AF9453;
				line-height: 36rpx;
				text-decoration-line: underline;
				margin-top: 30rpx;
				margin-bottom: 60rpx;
			}

			.tips {
				font-size: 26rpx;
				line-height: 39rpx;
				width: 80%;
				background: #f5f5f5;
				border-radius: 10rpx;
				border: 1px solid #f5f5f5;
				color: #AF9453;
				padding: 17rpx 30rpx;
				margin: auto;
			}
		}
	}
</style>